<template>
    <div class="roulesAdmin">
      <el-row>
        <el-col :span="3">
          <div class="left">
            <div class="classMenu">
              <el-tree :data="classList" :props="{ label: 'label', children: 'children' }" @node-click="handleNodeClick"
                highlight-current class="treeStyle" />
            </div>
  
          </div>
        </el-col>
    
        <el-col :span="21">
         
          <div class="right">
            <div class="classHeader">
              <div class="top">
                <div class="className">
                  <h2>2021级数媒艺术1班</h2>
                  <span>32人</span>
                </div>
               
              </div>
              <div class="button">
                <el-button-group>
                  <el-button @click="addUser" type="primary" icon="User">添加成员</el-button>
                  <el-button >批量移除</el-button>
                </el-button-group>

               
              </div>
            </div>
  
            <div class="classCon">
              <!-- 用户数据表格 -->
             
              <el-table :data="userList" @selection-change="handleSelectionChange"
              style="max-height: 70vh; overflow-y: auto;"
              >  
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column width="150" label="姓名" align="left" key="userName" prop="userName"
                  :show-overflow-tooltip="true">
                  <template #default="scope">
                    <div style="display: flex; align-items: center">
                      <div class="block">
                        <el-avatar shape="square" :size="30" :src="squareUrl ? squareUrl : defAva" />
                      </div>
                      <span style="margin-left: 10px;">{{ scope.row.userName }}</span>
                    </div>
                  </template>
                </el-table-column>

                <el-table-column label="所属部门" align="left" key="deptName" prop="deptName" :show-overflow-tooltip="true"/>
                <el-table-column prop="adminRange" label="管理范围" align="left" width="240" class-name="small-padding fixed-width">
                  <template #default="scope">
                    <div class="adminRange">
                        <p>{{scope.row.adminRange}}</p>
                        <h3 @click="onSetup">设置</h3>
                    </div>
                  </template>
                </el-table-column>
              </el-table>   
            </div>
          </div>
          
        </el-col>
      </el-row>

  
  

      <!-- 管理范围弹出层 -->
      <adRangeDialog :nextLevelStatus="nextLevelStatus"  ref="rangeRef"/>
      <!-- 添加成员弹出层 -->
      <!-- <adRangeDialog ref="userRef"/> -->

    </div>
  </template>
  <script setup>
  import defAva from '@/assets/images/user-default.jpg';
  import adRangeDialog from "./adrange-dialog"

  const rangeRef=ref(null)
  const router = useRouter()
  const squareUrl = ref("")
  const nextLevelStatus=ref(false)
  // 对象树结构
  const classList = ref([
    {
      label: '超级管理员(1人)',
     
    },
    {
      label: '管理员(19人)',   
       
    },
    {
      label: '教师(84人)',   
       
    }
  ])
  
  // 用户数据
  const userList = ref([
    {
      userName: "张三",
      adminRange:"信创产业学院",
      deptName: "软件开发部",

    },
    {
      userName: "张三",

      adminRange:"信创产业学院",

     
    },
    {
      userName: "张三",

      deptName: "软件开发部",
      adminRange:"中铁产业学院",

    },
    {
      userName: "张三",

      deptName: "软件开发部",
      adminRange:"信创产业学院",


    }
   
  ])
  
  // 添加成员
const addUser=()=>{
  rangeRef.value.openDialog()
  nextLevelStatus.value=true
}
  
  
  /** 节点单击事件 */
  function handleNodeClick(data) {
    console.log(data);
  };
  
  
  // 申请列表
  const onApply = () => {
    router.push({ path: "/system/applylist" })
  }
  
  // 点击操作中的详情
  const handleDtail = () => {
    router.push({ path: "/system/student" })
  }
  
  // 邀请加入
  
  const onJoin = () => {
    router.push({ path: "/system/join" })
  }
  
  
  // 用户表格选择项发生变化时
  const handleSelectionChange = () => {
  
  }

//   点击管理范围中的设置
const onSetup=()=>{
  rangeRef.value.openDialog()
  nextLevelStatus.value=false

}
  </script>
  
  <style lang="scss" scoped>
  .roulesAdmin {
  
    .left {
      min-height: calc(100vh - 84px);
      border-right: 2px solid #eee;
      padding: 30px 20px 0 0;
    }
  
    .right {
  
      padding-left: 50px;
      width: 100%;
  
      .classHeader {
        margin-bottom: 30px;
  
        .top {
  
          width: 100%;
  
          display: flex;
          justify-content: space-between;
  
          .className {
            display: flex;
            align-items: center;
  
            margin: 30px 0 20px 0;
  
            h2 {
              line-height: 1em;
              font-size: 18px;
              font-weight: 900;
  
            }
  
            span {
              font-size: 14px;
              display: block;
              border: 1px solid #23C3B8;
              border-radius: 5px;
              color: #23C3B8;
              margin-left: 5px;
            }
          }
  
          .classInfo {
            display: flex;
            align-items: center;
            padding-right: 10px;
  
            .box {
              display: flex;
              align-items: center;
              margin-left: 30px;
              font-size: 12px;
              color: #1890FF;
              cursor: pointer;
  
              span {
                margin-left: 3px;
              }
            }
          }
        }
  
        .button {
          display: flex;
          align-items: center;
  
          .line {
            width: 1px;
            height: 15px;
            margin: 0 7px;
            background: #ccc;
          }
  
        }
      }
  
      .classCon{
        .adminRange{
            display: flex;
            align-items: center;
       
            p{
                font-size: 12px;
                color: #333;
                line-height: 1em;
            }
            h3{
                margin-left: 15px;
                color: #1890FF;
                line-height: 1em;
                font-size: 14px;
                cursor: pointer;
            }
        }
      }
      .coloricon {
        font-size: 12px;
      }
    }
  
  }

  
  </style>
  
  <style>
  .roulesAdmin .treeStyle .el-tree-node__content {
    line-height: 4em;
    height: 40px;
  }
  
  .roulesAdmin .el-badge__content {
    padding: 2px;
    height: auto;
    font-size: 8px;
  }
  
  .roulesAdmin .el-table .el-table__header-wrapper th,
  .roulesAdmin .el-table .el-table__fixed-header-wrapper th {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  </style>